<template>
  <!-- 搜航班号 -->
  <div class="flight_query">
    <el-form
      :inline="true"
      ref="ruleFormRef"
      label-position="top"
      :model="Flight_query"
      :rules="rules"
      class="animate__animated animate__slideInRight"
    >
      <!-- 航班号 -->
      <div class="flight_number">
        <el-form-item
          prop="flight_number">
          <el-input
            v-model="Flight_query.flight_number"
            size="large"
            placeholder="请填写航班号，例如MU1234"
          />
        </el-form-item>
        <div class="flight_number_border" ></div>
      </div>
      <!-- 出发日期 -->
      <div class="departure_date">
        <el-form-item prop="departure_date" >
          <el-date-picker
            v-model="Flight_query.departure_date"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="出发日期"
            size="large"
            :disabled-date="disabled"
            style="width: 300px"
          />
        </el-form-item>
        <div class="departure_date_border"></div>
      </div>
      <el-button
        class="flight_btn"
        color="rgb(10,22,46)"
        round
        @click="onSubmit"
        :icon="Search"
      >
      </el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Search } from "@icon-park/vue-next"
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
// 航班号查询
const Flight_query = reactive({
  flight_number: "",
  departure_date: "",
});
const disabled = (time) => {
  return time.getTime() < Date.now() - 8.64e7 - (1*1000*60*60*24*3);
};
//路由
const router = useRouter();
let route = useRoute();
// 验证
const ruleFormRef = ref();
const rules = reactive({
  flight_number: [
    { required: true, message: "航班号不能为空", trigger: "blur" },
  ],
  departure_date: [
    { required: true, message: "出发日期不能为空", trigger: "blur" },
  ],
});
// 提交查询
const onSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      router.push({
        path: "/index/flightdynamic/content",
        query:{
          flightNumber:Flight_query.flight_number,
          departureDate:Flight_query.departure_date
        }
      });
    } else {
      ElMessage.error("请输入正确数据");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
// 航班查询
.flight_query {
  width: 90%;
  height: 100px;
  margin: auto;
  // box-shadow: var(--el-box-shadow-dark);
  // border: 1px solid #000;
  transform: translate(1%, 20%);
}
// 航班号
.flight_number {
  width: 56%;
  height: 92px;
  transform: translate(1%, 0%);
  pointer-events: auto;
}
.flight_number_border {
  width: 540px;
  position: absolute;
  pointer-events: none;
  border: 1px solid #e4e7ed;
  transform: translate(3%, -40px);
}
// 出发日期
.departure_date {
  width: 34%;
  height: 92px;
  pointer-events: auto;
  transform: translate(6.5%, 0%);
}
.departure_date_border {
  width: 245px;
  position: absolute;
  pointer-events: none;
  border: 1px solid #e4e7ed;
  transform: translate(11%, -40px);
}
// 查询按钮
.flight_btn {
  font-size: 18px;
  height: 92px;
  width: 92px;
  transform: translate(-6.5%, 0%);
}
// ---------- //
.el-button.is-round {
  border-radius: 8px;
}
:deep(.el-input--large .el-input__inner) {
  height: 92px;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 0px;
}
:deep(.el-input--large) {
  font-size: 20px;
}
:deep(.el-input__inner) {
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  color: var(--el-input-text-color, var(--el-text-color-regular));
  font-size: 20px;
  height: 42px;
  line-height: 32px;
  padding: 0;
  outline: 0;
  border: none;
  background: 0 0;
}
:deep(.el-input__wrapper) {
  border-radius: 10px;
}
</style>